<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .login-header {
            width: 100%;
            text-align: center;
            font-size: 20pt;
            position: absolute;
        }
        
        .modal {
            width: 500px;
            height: 200px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            display: none;
            box-shadow: 0px 0px 20px #ddd;
            z-index: 999;
            cursor: move;
        }
        
        .modal form {
            display: flex;
            flex-direction: column;
            height: 100%;
            width: 100%;
        }
        
        .modal form .item1 {
            flex: 1;
            display: flex;
            justify-content: center;
            text-align: center;
        }
        
        .modal form .item2 {
            margin: 0 auto;
            width: 70%;
            display: flex;
            flex: 1;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;
        }
        
        .username {
            margin-left: 16px;
        }
        
        .vip {
            border: 1px solid #ccc;
            border-radius: 20px;
            padding: 3px 40px;
            background-color: orange;
            color: #fff;
            height: 30px;
        }
        
        .close {
            position: absolute;
            right: -10px;
            top: -10px;
            border: 1px solid #ccc;
            width: 20px;
            height: 20px;
            text-align: center;
            line-height: 17px;
            border-radius: 50%;
            background-color: white;
        }
        
        .red {
            background-color: red;
        }
        
        .green {
            background-color: green;
        }
    </style>
</head>

<body>
    <div class="login-bg"></div>
    <div class="login-header">单击,登入会员</div>
    <div class="modal">
        <form>
            <div class="item1">登录会员</div>
            <div class="item2">
                <div class="username">
                    <label for="username">用户名</label>
                    <input type="text" name="username" class="Uuser">
                </div>
                <div>
                    <label for="password">密码</label>
                    <input type="text" name="password" class="Ppass">
                </div>
            </div>
            <div class="item1">
                <div class="vip">登入会员</div>
            </div>
        </form>
        <div class="close">x</div>
    </div>

    <script>
        var reg1 = /^[^0-9]\w{5,15}$/;
        var reg2 = /^[a-zA-z0-9_-]{6,16}$/
        var user = document.querySelector('.Uuser');
        var pass = document.querySelector('.Ppass');
        var vip = document.querySelector('.vip')
        var modal = document.querySelector('.modal');
        var close = document.querySelector('.close')
        var login = document.querySelector('.login-header');
        var bg = document.querySelector('.login-bg');
        login.addEventListener('click', function() {
            modal.style.display = 'block';
            bg.style.display = 'block';
            modal.style.backgroundColor = 'white';
        });
        close.addEventListener('click', function() {
            modal.style.display = 'none';
            bg.style.display = 'none';
        })
        modal.addEventListener('mousedown', function(e) {
            var x = e.pageX - modal.offsetLeft;
            var y = e.pageY - modal.offsetTop;
            var move = function(e) {
                modal.style.left = e.pageX - x + 'px';
                modal.style.top = e.pageY - y + 'px';
                console.log(modal.style.left);
            };
            document.addEventListener('mousemove', move);
            document.addEventListener('mouseup', function(e) {
                document.removeEventListener('mousemove', move);
            })

        });
        
        vip.addEventListener('click', function() {
            if (!reg1.test(user.value)) {
                alert('用户名错误');
                return;
            }
            if (!reg2.test(pass.value)) {
                alert('密码错误');
                return;
            }
            alert('登陆成功');

        });
    </script>
</body>

</html>